<template>
	<view class="page">
		<view class="input-title ">
			<text>审批状态</text>
			<template >
				<template>待审批</template>
			</template>
		</view>
		<view class="input-title ">
			<text>申请分类</text>
			<template >
				<template >{{wapply.taskType}}</template>
			</template>
		</view>
		<view class="input-title ">
			<text>开始时间</text>
			<template >
				<template >{{(wapply.startDate)}}</template>
			</template>
		</view>
		<view class="input-title ">
			<text>结束时间</text>
			<template >
				<template >{{(wapply.endDate)}}</template>
			</template>
		</view>
		<view class="input-title">
			<text>申请内容</text>
		</view>
		<view class="input-body">
			<textarea class="input-textare" >{{wapply.description}}</textarea>
			<!-- v-model="repairDetail.content" -->
		</view>
		<button
			class="confirm-btn"
			:class="'bg-' + themeColor.name"
			:disabled="btnLoading"
			:loading="btnLoading"
			@click="confirm"
		>
			审批
		</button>
<!-- 		<view class="uni-timeline">
			<view class="uni-timeline-item" :class="[
						index === 0 ? `text-${themeColor.name} uni-timeline-first-item` : '',
						index === approveDetail.length - 1 ? 'uni-timeline-last-item' : ''
					]"
			 v-for="(item, index) in approveDetail" :key="index">
				<view class="uni-timeline-item-divider"></view>
				<view class="uni-timeline-item-content">
					<view>
						{{ item.approve }}
					</view>
					<view class="datetime">
						{{item.name}} {{ item.suggest }} {{ item.time}}
					</view>
				</view>
			</view>
		</view> -->
		   <!-- <block v-if="isShowConfirm">
		      <view class='toast-box'>
		        <view class='toastbg'></view>
		        <view class='showToast'>
		            <view class='toast-title'>
		                <text>审批</text>
						<text class="close" @click="isShowConfirm=false">x</text>
		            </view>
		            <view class='toast-main'>
		                <view class='toast-input'>
		                    <textarea class="detailText" 
		                        placeholder="请输入审批意见"
		                        :value="suggest">
		                    </textarea>
		                </view>
		            </view>
		            <view class='toast-button'>
		                <view class='button1' @click="cancel">
		                    <button >驳回</button>
		                </view>
		                <view class='button2' @click="confirmAcceptance">
		                    <button data-url="../allOrder/allOrder" >同意</button>
		                </view>
		            </view>
		        </view>
		    </view>
		  </block> -->
	    <modal v-if="isShowConfirm" title="审批" confirm-text="确定" cancel-text="取消" @cancel="isShowConfirm=false" @confirm="confirmPop"> 
			  <view class="uni-form-item uni-column">
			          <picker @change="examinationType" :range="examinationTypeArray">
			              <label class="ty">审批选择：</label>
			              <label class="">{{ examinationTypeArrayType?examinationTypeArrayType:"请选择" }}</label>
			          </picker>
			  </view>
			<input type='text' placeholder="请输入审批意见" v-model="suggest" />
		</modal>
	</view>
</template>
<script>
import { repair ,workState,getRepairType} from '@/api/basic';
import moment from '@/common/moment';

export default {
	data() {
		return {
			// repairDetail: {"id":4,"merchant_id":2,"member_id":69,"cate_id":1,"content":"日常报修,2222","log":[{"id":68,"time":1602174818,"action":"repair/approve","suggest":"好好好的","name":"系统管理员","approve":"审批"},{"id":69,"time":1602174760,"action":"repair/audit","suggest":"好的","name":"古月","approve":"审核"},{"id":69,"time":1602174747,"action":"repair/apply","suggest":"提交申请","name":"古月","approve":"申请"}],"remind":0,"sort":0,"state":"approve","status":"repair/approve","created_at":1602174747,"updated_at":1602174818},
			// approveDetail:[{"id":68,"time":'2020-12-12:12:12:12',"action":"repair/approve","suggest":"好好好的","name":"系统管理员","approve":"审批"},{"id":69,"time":'2020-12-12:12:12:12',"action":"repair/audit","suggest":"好的","name":"古月","approve":"审核"},{"id":69,"time":'2020-12-12:12:12:12',"action":"repair/apply","suggest":"提交申请","name":"古月","approve":"申请"}],
			// imageList: [],
			// id: undefined,
			// loading: true
			wapply:{},
			isShowConfirm:false,
			suggest: '',
			examinationTypeArray:['驳回','审批'],
			examinationTypeIndex:0,
			examinationTypeArrayType:'',
		};
	},
	// 加载后将父页面传来的值赋给user
	onLoad:function(option){
		this.wapply = JSON.parse(option.wapply);
		console.log(this.wapply)
		this.wapply.endDate=this.renderTime(this.wapply.endDate)
		this.wapply.startDate=this.renderTime(this.wapply.startDate)
	},
	onShow() {
		uni.setNavigationBarColor({
		    frontColor: '#ffffff',
		    backgroundColor: this.themeColor.color,
		    animation: {
		        duration: 400,
		        timingFunc: 'easeIn'
		    }
		})
	},
	methods:{
		  examinationType(e) {
		    this.examinationTypeIndex = e.target.value;
		    this.examinationTypeArrayType=this.examinationTypeArray[this.examinationTypeIndex]
		   },
		renderTime(date) {
		  var dateee = new Date(date).toJSON()
		  return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
		},
		confirm(){
			this.isShowConfirm=true
		},
		confirmPop(){
			wx.request({
				url: 'http://121.36.218.32:7002/process/cplTask',
				data: {
					taskId:this.wapply.taskId,
					answer:this.examinationTypeArrayType,
					answerComment:this.suggest
				},
				method: 'post',
				header: {
					'content-type': 'application/json',
					'authentication': wx.getStorageSync('tokenStr') 
				},
				//13541228840
				success(resp) {
					console.log(resp);
					this.$mHelper.toast('审批成功。');
					this.isShowConfirm=true
				}
			})
		}
	}
};
</script>
<style lang="scss">
.uni-column{
	margin-bottom: 20rpx;
}
page {
	background-color: $page-color-base;
}
.uni-timeline {
			padding: $spacing-lg;
			background-color: $color-white;
		}
/*问题反馈*/
.input-title {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: $spacing-base;
	margin-top: $spacing-base;
	font-size: $font-base;

}

.input-body {
	background: $color-white;
	padding: $spacing-sm $spacing-base;
}

.input-textare {
	height: 200upx;
	font-size: 34upx;
	line-height: 50upx;
	width: 100%;
	box-sizing: border-box;
	padding: 20upx 30upx 0;
}
	
.toast-box {
    width: 100%;
    height: 100%;
    opacity: 1;
    position: fixed;
    top: 0px;
    left: 0px;
}
 
 
.toastbg {
    opacity: 0.2;
    background-color: black;
    position: absolute;
    width: 100%;
    min-height: 100vh;
}
 
.showToast {
    position: absolute;
    opacity: 1;
    width: 70%;
    margin-left: 15%;
    margin-top: 40%;
}
 
.toast-title {
    padding-left: 5%;
    background-color: #409EFF;
    color: white;
    padding-top: 2vh;
    padding-bottom: 2vh;
	font-size: 30rpx;
    border-top-right-radius: 16rpx;
    border-top-left-radius: 16rpx;
}
 
.toast-main {
    padding-top: 2vh;
    padding-bottom: 2vh;
    background-color: white;
    text-align: center;
}
 
.toast-input {
    margin-left: 5%;
    margin-right: 5%;
    border: 1px solid #ddd;
    padding-left: 2vh;
    padding-top: 1vh;
    padding-bottom: 1vh;
	border-radius: 10rpx;
	height: 160rpx;
}
 
.toast-button {
    display: flex;
}
 
.button1 {
    width: 50%;
	z-index: 100;
}
 
.button2 {
    width: 50%;
	z-index: 100;
}
 
.button1 button {
    width: 100%;
    background-color: #ea7577;
    color: white;
	font-weight: 400;
    border-radius: 0px;
    border-bottom-left-radius: 16rpx;
	z-index: 100;
}
 
.button2 button{
    width: 100%;
    background-color: #72d972;
    color: white;
	font-weight: 400;
    border-radius: 0px;
    border-bottom-right-radius: 16rpx;
	z-index: 100;
}
.detailText{
	width: 100%;
	height: 150rpx;
}
.close{
	position: absolute;
	right: 30rpx;
	font-size: 40rpx;
	top:15rpx
}
</style>
